<template>
	<view class="page">
		<!-- <Tabs :list="titleList" :current="current" @handleChange="changeCurrent"></Tabs> -->
		<view class="tcard">
			<view class="title">
				就诊人信息
			</view>
			<view class="tform">
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						<view>证件类型</view>
					</view>
					<picker @change="bindPickerChangeCertType" :range="listCertType" disabled range-key="label">
						<view class="uni-input" :style="{color: 'rgba(0, 0, 0, 0.24)' }">
							{{form.certTypeLabel || '请选择证件类型'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item flex-between">
					<view class="value flex">
						<view class="xin">*</view>
						<view>证件号码</view>
					</view>
					<view :style="{color: 'rgba(0, 0, 0, 0.24)' }">{{form.certId}}</view>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						姓名
					</view>
					<view :style="{color: 'rgba(0, 0, 0, 0.24)' }">{{form.patName}}</view>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						性别
					</view>
					<picker @change="bindPickerChangeSex" disabled range-key="label" :value="sex" :range="listSex">
						<view class="uni-input" :style="{color:'rgba(0, 0, 0, 0.24)'}">
							{{form.patSexLabel || '请选择性别'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						出生日期
					</view>
					<picker @change="bindPickerChangeBirthday" disabled mode="date">
						<view class="uni-input" :style="{color:'rgba(0, 0, 0, 0.24)'}">
							{{form.patBirthDate || '请选择出生日期'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						民族
					</view>
					<picker @change="bindPickerChangeNation" disabled range-key="label" :value="form.nation"
						:range="listNation">
						<view class="uni-input" :style="{color: 'rgba(0, 0, 0, 0.24)'}">
							{{nationLabel || '请选择民族'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						联系地址
					</view>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="uni-input"
							:style="{color: form.province === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{regionName || '点击选择省市区'}} &gt;
						</view>
					</pick-regions>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						详细地址
					</view>
					<input type="text" v-model="form.patAddress" placeholder="请输入街道、小区、门牌号等" />
				</view>
				<view class="tform-item" style="border: none;">
					<view class="value flex">
						<view class="xin">*</view>
						手机号码
					</view>
					<input type="number" maxlength="11" v-model="form.patPhone" placeholder="请输入手机号" />
				</view>
				<view class="tform-item" style="border: none;">
					<view class="value flex">
						<view class="xin">*</view>
						就诊人关系
					</view>
					<picker @change="bindPickerChangeRelationShip" range-key="label" :value="form.relationShip"
						:range="listRelationShip">
						<view class="uni-input"
							:style="{color: form.relationShip === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.relationShip || '请选择就诊人关系'}} &gt;
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="tcard" v-if="patAge<=6">
			<view class="tcard">
				<view class="title">
					监护人信息
				</view>
				<view class="tform">
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							监护人
						</view>
						<input type="text" v-model="form.guardian" placeholder="请输入监护人姓名" />
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							<view>监护人证件类型</view>
						</view>
						<picker @change="bindPickerChangeGuardianCertType" :range="listCertType" range-key="label">
							<view class="uni-input"
								:style="{color: form.guardianCreType === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.guardianCreTypeLabel || '请选择监护人证件类型'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item flex-between">
						<view class="value flex">
							<view class="xin">*</view>
							<view>监护人证件号码</view>
						</view>
						<input type="text" class="text-zjhm" maxlength="18" v-model="form.guardianCreNo"
							placeholder="请填写监护人证件号码" />
					</view>
					<view class="tform-item" style="border: none;">
						<view class="value flex">
							<view class="xin">*</view>
							监护人手机号码
						</view>
						<input type="number" class="guardian-phone" maxlength="11" v-model="form.patPhone"
							placeholder="请输入手机号" />
					</view>
				</view>
			</view>
		</view>
		<ButtonVue content="确认修改" @click="sub"></ButtonVue>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Tabs from "@/components/Tabs/index.vue"
	import PickRegions from '@/components/pick-regions/pick-regions.vue'
	import ButtonVue from "../../components/Button/Button.vue"
	import {
		getYearsBetweenDates
	} from "@/utils/assist.js"
	import {
		address
	} from "../../utils/listAddress.js"
	import {
		listCertType
	} from "../../utils/listCertType.js"
	import {
		listNation
	} from "../../utils/listNation.js"
	import {
		listSex
	} from "../../utils/listSex.js"
	import {
		listRelationShip
	} from "../../utils/listRelationShip.js"
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		updateRecord
	} from '@/api/patientCard.js'
	import {
		phoneReg,
		cardReg,
		idCard
	} from '@/common/js/reg.js'

	export default {
		components: {
			Tabs,
			PickRegions,
			ButtonVue
		},
		data() {
			return {
				listNation,
				listSex,
				listAddress: address,
				listRelationShip,
				form: {
					cardType: 0,
					patType: 1,
				},
				sex: 1,
				listCertType,
				showGuardian: false,
				titleList: [{
					"name": "成人",
					"patType": 1
				}, {
					"name": "儿童",
					"patType": 2
				}],
				current: 0,
				defaultRegionCode: '510107',
				region: [],
				nationLabel: "",
				form: {}, //修改的详细信息
				patAge: 0,
			}
		},
		computed: {
			...mapGetters(['userId', 'userInfo', 'userList']),
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			},
			regionNameKid() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			}
		},
		mounted() {
			this.form = uni.getStorageSync("patientCardDetail");
			this.$set(this.form, 'certType', this.form.certType)
			this.$set(this.form, 'certTypeLabel', this.form.certTypeName)
			let userCard = this.form.certId
			this.$set(this.form, 'patSex', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '2' : '1')
			this.$set(this.form, 'patSexLabel', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '女性' : '男性')
			let nationLabel = this.listNation.filter(item => item.value == this.form.nation);
			if (nationLabel) {
				this.nationLabel = nationLabel[0].label
			}
			this.region.push({
				// code: '51',
				name: this.form.province
			})
			this.region.push({
				// code: '5101',
				name: this.form.city
			})
			this.region.push({
				// code: '510107',
				name: this.form.district
			})
			let year = userCard.substring(6, 10);
			let month = userCard.substring(11, 12);
			let day = userCard.substring(13, 14);
			let bir = new Date(year + "-" + month + "-" + day);

			this.patAge = getYearsBetweenDates(new Date(), new Date(bir));
		},
		methods: {
			...mapActions(['setUserList']),

			changeCurrent(index) {
				this.current = index;
				this.form.patType = this.titleList[index].patType
			},
			back() {
				uni.removeStorageSync('heathRecords')
				uni.navigateBack(1)
			},
			// 通过身份证得到性别和出生日期
			getSexBarth() {
				if (!this.form.certId) return
				let userCard = this.form.certId
				// 判断当前身份证是否已经创建，如果创建，则提示不能再次创建
				// 通过当前身份证和userList里面的身份证进行比较即可
				let certIdIsHave = false; //身份证是否已经存在
				for (let i = 0; i < this.userList.length; i++) {
					if (userCard == this.userList[i].certId) {
						certIdIsHave = true;
						break;
					}
				}
				if (certIdIsHave) {
					this.$refs.uToast.show({
						title: '当前身份证已经创建了就诊卡',
						type: 'warning',
						position: "top"
					})
					return;
				}
				this.$set(this.form, 'patBirthDate', userCard.substring(6, 10) + "-" + userCard.substring(10, 12) + "-" +
					userCard.substring(12, 14))
				// 511611198702222322
				// this.showGuardian = new Date().getFullYear() - userCard.substring(6, 10) <= 6
				// console.log(listSex[parseInt(userCard.substr(16, 1)) % 2 + 1].value)
				this.$set(this.form, 'patSex', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '2' : '1')
				this.$set(this.form, 'patSexLabel', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '女性' : '男性')
			},
			bindPickerChangeCertType(e) {
				this.$set(this.form, 'certType', listCertType[e.detail.value].value)
				this.$set(this.form, 'certTypeLabel', listCertType[e.detail.value].label)
				this.$set(this.form, 'certTypeName', listCertType[e.detail.value].label)
			},
			bindPickerChangeRelationShip(e) {
				this.$set(this.form, 'relationShip', listRelationShip[e.detail.value])
			},
			bindPickerChangeGuardianCertType(e) {
				this.$set(this.form, 'guardianCreType', listCertType[e.detail.value].value)
				this.$set(this.form, 'guardianCreTypeLabel', listCertType[e.detail.value].label)
			},
			bindPickerChangeSex(e) {
				this.$set(this.form, 'patSex', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '2' : '1')
				this.$set(this.form, 'patSexLabel', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '女性' : '男性')
			},
			bindPickerChangeBirthday(e) {
				this.$set(this.form, 'patBirthDate', e.detail.value)
			},
			bindPickerChangeNation(e) {
				this.nationLabel = listNation[e.detail.value].label;
				this.$set(this.form, 'nation', listNation[e.detail.value].label)
			},
			handleGetRegion(region) {
				this.region = region
				console.log(region)
				this.$set(this.form, 'province', this.region[0].name)
				this.$set(this.form, 'city', this.region[1].name)
				this.$set(this.form, 'district', this.region[2].name)
			},
			sub() {

				if (!this.form.certType) return this.$u.toast('请选择证件类型')
				if (!this.form.certId) return this.$u.toast('请输入就诊人证件号码')
				if (!this.form.patName) return this.$u.toast('请输入姓名')
				if (!this.form.patSex) return this.$u.toast('请选择性别')
				if (!this.form.patBirthDate) return this.$u.toast('请选择出生日期')
				if (!this.form.nation) return this.$u.toast('请选择民族')
				if (!this.form.province) return this.$u.toast('请选择省')
				if (!this.form.city) return this.$u.toast('请选择市')
				if (!this.form.district) return this.$u.toast('请选择区')
				if (!this.form.patAddress) return this.$u.toast('请输入详细地址')

				if (this.form) {
					if (!idCard.test(this.form.certId)) {
						this.$u.toast('请填写正确的身份证号');
						return
					}
					if (!phoneReg.test(this.form.patPhone)) {
						this.$u.toast('请填写正确的手机号码');
						return
					}
				}
				if (this.current == 1) {
					if (!this.form.guardian) return this.$u.toast('请输入监护人姓名')
					if (!this.form.guardianCreType) return this.$u.toast('请输入监护人证件类型')
					if (!this.form.guardianCreNo) return this.$u.toast('请输入监护人身份证号码')
				}

				uni.showLoading({
					title: "正在修改就诊卡"
				})
				const data = {
					...this.form,
					openId: this.userId,
					...uni.getStorageSync('heathRecords')
				}
				console.log(data)
				updateRecord(data).then(res => {
					console.log(res)
					this.setUserList(res)
					uni.removeStorageSync('heathRecords')
					uni.navigateBack(1)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			toRecords() {
				uni.navigateTo({
					url: './records'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tcard {
		// margin-top: 20px;
	}

	.guardian-phone {
		width: 150px;
	}

	uni-input {
		text-align: right;

		.uni-input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.24);
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn {
			width: 80%;
			height: 64upx;
			background: $theme-color;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;

			&:nth-child(0) {
				background-color: transparent;
				border: 1px solid $theme-color;
				color: $theme-color;
			}
		}
	}

	.img {
		width: 66upx;
		height: 66upx;
		margin-right: 24upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.xin {
		color: red;
		text-align: center;
		font-size: 20px;
		height: 20px;
		padding: 0 5px;
	}

	.color-gray {
		color: gray
	}

	.text-zjhm {
		width: 50%;
	}

	.btn-zjsb {
		border: 1px dashed blue;
		background-color: rgb(216, 230, 254);
		color: blue;
		padding: 0 10px;
	}
</style>